<template>
  <main>
    <div class="date">
      <el-calendar v-model="date">
        <template #dateCell="{ data }">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split("-").slice(1).join("-") }}
            {{ data.isSelected ? "✔️" : "" }}
          </p>
        </template>
      </el-calendar>
    </div>
    <div class="list">
      <ul
        v-infinite-scroll="selectList"
        class="infinite-list"
        style="overflow: auto"
      >
        <li v-for="item in dataList" :key="item.id" class="infinite-list-item">
          {{ item.logTime }}-----{{ item.logName }}
        </li>
      </ul>
    </div>
  </main>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, watch } from "vue";
import { selectAllLog } from "@/api/serverRequest";

export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    let dataList = reactive([{ id: "", logName: "", logTime: "" }]);
    let date = ref();

    let page = ref(0);

    watch(date, (newVal) => {
      page.value = 1;
      let d = new Date(newVal);

      let time =
        d.getFullYear() +
        "-" +
        ("0" + (d.getMonth() + 1)).slice(-2) +
        "-" +
        ("0" + d.getDate()).slice(-2);
      console.log(time);
      selectAllLog(page.value, time).then((response) => {
        console.log(response.data);
        if (response.data) {
          for (let i = 0, len = dataList.length; i < len; i++) {
            dataList.shift();
          }
          dataList.push(...response.data);
        }
      });
    });

    function selectList() {
      if (date.value !== undefined) {
        let d = new Date(date.value);

        let time =
          d.getFullYear() +
          "-" +
          ("0" + (d.getMonth() + 1)).slice(-2) +
          "-" +
          ("0" + d.getDate()).slice(-2);
        page.value++;
        console.log(page.value, time);
        selectAllLog(page.value, time).then((response) => {
          if (response.data) {
            dataList.push(...response.data);
          }
        });
      } else {
        page.value++;
        selectAllLog(page.value).then((response) => {
          dataList.push(...response.data);
          if (dataList[0].id === "") {
            dataList.shift();
          }
        });
      }
    }

    return {
      date,
      dataList,
      selectList,
      page,
    };
  },
});
</script>

<style scoped lang="scss">
main {
  display: flex;
  justify-content: center;
  width: 80%;
  margin: 2rem auto;
  .date {
    width: 50%;
  }
  .list {
    width: 50%;
    height: 100%;
  }
}

.infinite-list {
  height: 600px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  color: #61649f;
  border: 1px solid #61649f;
  cursor: pointer;
  &:hover {
    background-color: rgba(0, 0, 255, 0.1);
  }
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.infinite-list::-webkit-scrollbar {
  width: 6px;
}
// 滚动条轨道
.infinite-list::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
// 小滑块
.infinite-list::-webkit-scrollbar-thumb {
  background: #40a0ff49;
  border-radius: 10px;
}
.infinite-list::-webkit-scrollbar-thumb:hover {
  background: #40a0ff;
}
</style>
